<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../include/tag.jsp" %>
<%@ page import="com.party.core.model.system.TargetType" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${member == null ? '发布' : '编辑'}素材</title>
    <%@include file="../../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <style>
        .tag-wrap-category {
            border: 1px solid #f1eeec;
            min-height: 45px;
            min-width: 300px;
            padding: 5px;
            float: left;
            margin-right: 10px;
        }

        .tag-wrap-category .tag-item-category {
            float: left;
            margin: 5px 10px 5px 5px;
            padding: 5px 10px;
            background: #fff0f3;
            position: relative;
        }

        .tag-wrap-category .tag-name-category {
            line-height: 25px;
            display: inline-block;
            vertical-align: middle;
            float: left;
            margin-right: 5px;
        }

        .tag-wrap-category .tag-item-category .category-opt {
            vertical-align: sub;
            color: #e8473f;
        }

        .tag-wrap-category .tag-item-category.active {
            color: #fff;
            background: #f4615c;
        }
    </style>
</head>
<body>
<!--头部-->
<%@include file="../../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/member/materialmgmt/save.do">
                    <input type="hidden" name="id" value="${article.id}"/>
                    <div id="signDiv"${!isChild || isXzgsAdmin  ? '':'style="display: none"'} >
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">笔记本<span class="f-verify-red">*</span></label></label>
                                <div class="layui-input-inline">
                                    <select name="notebookId" lay-verify="notebookId" id="notebookId"  lay-filter="notebookId">
                                        <option value="">请选择笔记本</option>
                                        <c:forEach var="notebook" items="${notebooks}">
                                            <option value="${notebook.id}" ${notebookId == notebook.id ? 'selected="selected"' : ""}>${notebook.name}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">笔记本类型<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline">
                                    <select name="notebookTypeId" lay-verify="notebookTypeId" id="notebookTypeId"  lay-filter="notebookTypeId">
                                        <option value="">请选择笔记本类型</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题<span class="f-verify-red">*</span></label>
                            <div class="layui-input-block"
                                 style="width: calc(100% - 50%); float: left; margin-left: 0; margin-right: 10px;">
                                <input type="text" name="title" lay-verify="title" maxlength="50" autocomplete="off"
                                       placeholder="标题"
                                       class="layui-input" value="${article.title}">
                            </div>
                            <div class="layui-form-mid layui-word-aux">标题最多50字符</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">内容类型<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="contentType" lay-filter="contentType"
                                           lay-verify="contentType" value="1"
                                    ${article.contentType == 1 ? 'checked' : ''}
                                           title="图片">
                                    <input type="radio" name="contentType" lay-filter="contentType"
                                           lay-verify="contentType" value="2"
                                    ${article.contentType == 2 ? 'checked' : ''}
                                           title="文本">
                                </div>
                                <div class="layui-form-mid layui-word-aux">
                                    暂不支持图文
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="localDiv">
                        <label class="layui-form-label">内容<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block">
                            <script id="ueditor1" type="text/plain"></script>
                            <div style="display: none" id="contentView">${article.content}</div>
                            <input type="hidden" name="content" id="content" lay-verify="content"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
                            <a href="${ctx}/member/materialmgmt/list.do?notebookId=${notebookId}&notebookTypeId=${notebookTypeId}" class="layui-btn layui-btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div><!--底部-->
        <%@include file="../../include/footer.jsp" %>
    </section>
</div>

<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.config.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.all.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadCI.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadVideo.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" src="${ctxStatic}/UEditor/lang/zh-cn/zh-cn.js"></script>
<script>
    var ue = UE.getEditor('ueditor1', {
        initialFrameHeight: 500,//设置编辑器高度
        scaleEnabled: true
    });


    $(function () {
        var form,laydate;
        layui.use(['form'], function () {
            form = layui.form, laydate = layui.laydate;
            var formcache;


            if ('${notebookId}' != "") {
                loadnotebookTypeData('${notebookId}', '${notebookTypeId}');
            }

            // 所属者联动
            form.on('select(notebookId)', function (data) {
                $("#notebookTypeId").html("");
                var notebookId = data.value;
                loadnotebookTypeData(notebookId, '');
            });

            //自定义验证规则
            form.verify({
                notebookId: function (value) {
                    if (value == "") {
                        return '请选择笔记本';
                    }
                },
                notebookTypeId: function (value) {
                    if (value == "" || value==null) {
                        return '请选择笔记本类型';
                    }
                },
                title: function (value) {
                    if (value == "") {
                        return '请填写素材标题';
                    }
                },
                contentType: function (value) {
                    var checkLength = $('[name=contentType]:checked').length;
                    if (checkLength == 0) {
                        return "请选择文本内容";
                    }
                },
                content: function (value) {
                    $("#contentView").html(ue.getContent());
                    var content = $("#contentView").html();
                    if (content == "") {
                        return "请填写素材内容";
                    }
                }
            });
            form.render(); //更新全部

            //监听提交
            form.on('submit', function (data) {
                submitForm(data);
            });

            function getFormData() {
                $("#content").val(ue.getContent().replace(/&quot;/gi, ""));
                return util.serializeForm($('#myForm').serializeArray());
            }

            function submitForm(data) {
                txz.submitObject(data.elem, function (callBack) {
                    var formData = getFormData();
                    var action = $("#myForm").attr("action");
                    txz.ajaxRequest({
                        method: 'post',
                        url: action,
                        saveCache: true,
                        cacheObj: formcache,
                        params: formData,
                        callBack: function (res) {
                            typeof callBack === 'function' && callBack();
                            if (res.success) {
                                util.layerMsgSuccess("提交成功", function () {
                                    location.href = "${ctx}/member/materialmgmt/list.do"
                                });
                            } else {
                                util.layerMsgError("提交失败")
                            }
                        }
                    });
                })
            }


        });
        ue.addListener('ready', function () {
            this.setContent($("#contentView").html());
        });

        ue.addListener('blur', function () {
            $("#contentView").html(ue.getContent());
        });
        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：800x450',
                type: '<%=TargetType.ARTICLE.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#pic').val(imgs[0].path);
                }
            })
        })
        // 笔记本类型
        function loadnotebookTypeData(notebookId, notebookTypeId) {
            var array = new Array();
            if (notebookId == "") {
                $("#notebookTypeId").html("");
                array.push("<option value=''>选择笔记本类型</option>");
                $("#notebookTypeId").append(array.join(""));
                form.render('select');
            } else {
                $.post("${ctx}/member/notebook/getnotebookTyperByNotebookId.do", {
                    "notebookId": notebookId
                }, function (data) {
                    var notebookTypes = data.data;
                    for (var i = 0; i < notebookTypes.length; i++) {
                        if (notebookTypeId == notebookTypes[i].id) {
                            array.push("<option value = '" + notebookTypes[i].id + "' selected='selected' >" + notebookTypes[i].name + "</option>");
                        } else {
                            array.push("<option value = '" + notebookTypes[i].id + "'>" + notebookTypes[i].name  + "</option>");
                        }
                    }
                    $("#notebookTypeId").append(array.join(""));
                    form.render('select');
                });
            }
        }
    })

    // 文本编辑器图片上传
    function uEditorUploadCI(editor) {
        txz.openSelImg({
            min: 1,
            type: '<%=TargetType.ARTICLE.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
    }

    function uEditorUploadCIVideo(editor) {
        txz.openSelVideo({
            min: 1,
            type: '<%=TargetType.ARTICLE.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
    }

    function openDialog(title, url, width, height, cb, target) {
        layer.open({
            type: 2,
            area: [width, height],
            title: title,
            maxmin: true, //开启最大化最小化按钮
            content: url,
            btn: ['确定', '关闭'],
            yes: function (index, layero) {
                var body = layer.getChildFrame('body', index);
                var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                var inputForm = body.find('#inputForm');
                var top_iframe;
                if (target) {
                    top_iframe = target;//如果指定了iframe，则在改frame中跳转
                } else {
                    top_iframe = '_parent';//获取当前active的tab的iframe
                }
                inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示

                if (iframeWin.contentWindow.doSubmit()) {
                    cb(iframeWin.contentWindow.$);

                    setTimeout(function () {
                        top.layer.close(index);
                    }, 100);//延时0.1秒，对应360 7.1版本bug
                }

            },
            cancel: function (index) {
            }
        });
    }


</script>
</body>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '素材管理/素材',
            href: '${ctx}/member/materialmgmt/list.do?notebookId=${notebookId}&notebookTypeId=${notebookTypeId},
        }, {
            name: '${member == null ? '发布' : '编辑'}素材',
            curr: true
        }],
        btns: [{
            name: '返回',
            href: '${ctx}/member/materialmgmt/list.do?notebookId=${notebookId}&notebookTypeId=${notebookTypeId},
            icon: 'back'
        }]
    });
</script>
</html>